<nav>
  <ul class="flex space-x-1 flex-row-reverse">
    <li class="border border-emerald-500 border-solid rounded px-2 no-underline hover:bg-[#f2f2f2] cursor-pointer relative w-[100px]">
      <div href="#" is="nav" ng-click="IndexCtrl.openNav($event)">
        <div is="nav-item">
          <iconify-icon class="inline-block w-max h-max" icon="material-symbols:arrow-left-rounded" height="20" width="20"></iconify-icon>
          <span>Home</span>
        </div>
        <ul ng-show="IndexCtrl.showNav" is="nav-item-hidden" class="bg-white absolute hover:bg-[#f2f2f2] w-[100px] right-full top-0">
          <li class="border border-emerald-500 border-solid rounded px-2 no-underline">
            <div href="#" is="nav2-item" ng-click="IndexCtrl.openNav2($event)">
              <iconify-icon class="inline-block w-max h-max" icon="material-symbols:arrow-left-rounded" height="20" width="20"></iconify-icon>
              <span>Home</span>
              <ul ng-class="{hidden: !IndexCtrl.showNav2}" is="nav-item-hidden" class="bg-white absolute hover:bg-[#f2f2f2] w-[100px] right-full top-0">
                <li class="border border-emerald-500 border-solid rounded px-2 no-underline">
                  <div href="#">
                    <iconify-icon class="inline-block w-max h-max" icon="material-symbols:arrow-left-rounded" height="20" width="20"></iconify-icon>
                    <span>Home</span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
    <!-- <li
      class="border border-emerald-500 border-solid rounded px-2 no-underline"
    >
      <a href="/about"
        ><p>About</p>
        <iconify-icon class="inline-block w-max h-max"
          icon="material-symbols:arrow-left-rounded"
          height="20"
        ></iconify-icon
      ></a>
    </li>
    <li
      class="border border-emerald-500 border-solid rounded px-2 no-underline"
    >
      <a href="/contact"
        ><p>Contact</p>
        <iconify-icon class="inline-block w-max h-max"
          icon="material-symbols:arrow-left-rounded"
          height="20"
        ></iconify-icon>
      </a>
    </li> -->
  </ul>
</nav>